<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-02-21 10:05:29
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-18 15:15:36
 * @FilePath: /XMate-h5/src/views/myXmate/myTeam/teamNoticeBoard/scoreTable.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="bg-white">
    <div class="overflow-y-auto">
      <el-table v-if="data.length > 0" :data="data" :border="false" stripe>
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :fixed="item.fixed"
          :width="item.width"
          :sortable="(item.isSocre ? true : false) && enableSort"
        >
          <template #default="scope" v-if="item.customRender">
            <span
              :class="{
                'text-red-500':
                  item.isSocre && Number(scope.row[item.prop]) < item.average,
              }"
            >
              {{optimizeDecimal(scope.row[item.prop]) || "-"}}
            </span>
          </template>
          <template #default="scope" v-else-if="item.formatter">
            {{optimizeDecimal(scope.row) || "-"}}
          </template>
        </el-table-column>
      </el-table>
      <ChartEmpty v-else/>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import ChartEmpty from "@/components/charts/chartEmpty.vue";
import { optimizeDecimal } from "@/utils/num";

const props = defineProps({
  enableSort: {
    type: Boolean,
    default: true
  },
  data: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  }
});
</script>

<style lang="less" scoped>
:deep(.el-table) {
  --el-table-border-color: transparent;
  --el-table-header-bg-color: #f5f5f5;
  // 移除单元格边框
  // 移除单元格边框
  .el-table__cell {
    border: none !important;
    // max-width: 100px; // 设置最大宽度
  }

  // 保持底部边框
  .el-table__row {
    border-bottom: 1px solid #e5e5e5;
  }

  // 表头不换行，超出显示省略号
  .el-table__header-wrapper {
    th {
      .cell {
        max-width: 190px;
      }
    }
  }

  // 内容超出时换行显示
  .el-table__body-wrapper {
    td {
      .cell {
        white-space: normal;
        word-break: break-all;
      }
    }
  }

  // 添加排序图标样式
  .caret-wrapper {
    height: 20px;
    .sort-caret {
      border-width: 4px;
    }
  }

  .ascending .sort-caret.ascending {
    border-bottom-color: #0fad72;
  }

  .descending .sort-caret.descending {
    border-top-color: #0fad72;
  }
}

// 确保表格内容可以横向滚动
.overflow-x-auto {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
  display: none; /* 对于 Chrome, Safari 和 Opera */
}

body {
  overflow: hidden; /* 隐藏整个页面的滚动条 */
}

/* 对于 Firefox */
html {
  scrollbar-width: none; /* 隐藏滚动条 */
}
</style>
